<template>
    <div class="examprepareBody">
        <div class="box">
            <div>
                <div class="stampBox"
                :class="form.result === '已通过' ? 'stampBox' : 'stampBox noBox'"
          v-show="form.result !== '待阅卷'"
                >
                    <div :class="form.result === '已通过' ? 'stampBox>stamp' : 'noBox>stamp'"
          v-show="form.result !== '待阅卷'">{{ form.result }}</div>
                </div>
            </div>
            <div class="title">
                <el-page-header @back="goBack">
                    <template #content>
                        <span>{{ form.title }} </span>
                    </template>
                </el-page-header>
            </div>
            <div class="time">

                <span>用时：{{moment(form.stuEndTime).diff(form.studentStartTime,"minute")}}分钟</span>
                <div class="solid"></div>
                <span>交卷时间: {{form.stuEndTime?form.stuEndTime.substr(0,16):'' }}</span>
                <div class="solid"></div>
                <span>试卷总分: {{ form.scores }}</span>
                <div class="solid"></div>
                <span>通过分数: {{form.pastscores}}</span>
            </div>
            <div class="examNum">
                <span 
                v-show="form.result !== '待阅卷'"
          :class="form.result === '已通过' ? 'passNum' : 'noPassNum'"
                >{{ form.studentScores }}</span>
                <span class="numTitle" v-show="form.result === '已通过' ">恭喜，通过考试</span>
                <span class="numTitle" v-show="form.result === '未通过'"
          >很可惜，未通过</span
        >
        <span class="load" v-show="form.result === '待阅卷'">{{
          form.result
        }}</span>
            </div>
            <table>
                <tr>
                    <td></td>
                    <td>单选题{{ radioNum === 0 ? "" : "(" + radioNum + ")" }}</td>
                    <td>多选题{{ checkNum === 0 ? "" : "(" + checkNum + ")" }}</td>
                    <td>判断题{{ isNum === 0 ? "" : "(" + isNum + ")" }}</td>
                    <td>填空题{{ fillNum === 0 ? "" : "(" + fillNum + ")" }}</td>
                    <td>问答题{{ qadNum === 0 ? "" : "(" + qadNum + ")" }}</td>

                </tr>
                <tr>
                    <td>正确数 </td>
                    <td>{{radioNumCorrect===0?'--':radioNumCorrect+' 题'}}</td>
                    <td>{{checkNumCorrect===0?'--':checkNumCorrect+' 题'}}</td>
                    <td>{{isNumCorrect===0?'--':isNumCorrect+' 题'}}</td>
                    <td v-show="form.result === '待阅卷'" rowspan="2" style="color:red">等待阅卷</td>
                    <td v-show="form.result === '待阅卷'" rowspan="2" style="color:red">等待阅卷</td>
                    <td v-show="form.result !== '待阅卷'">{{fillNumCorrect===0?'--':fillNumCorrect+' 题'}}</td>
                    <td v-show="form.result !== '待阅卷'">{{qadNumCorrect===0?'--':qadNumCorrect+' 题'}}</td>
                </tr>
                <tr>
                    <td>错误数</td>
                    <td>{{radioNum-radioNumCorrect===0?'--':radioNum-radioNumCorrect+' 题'}}</td>
                    <td>{{checkNum-checkNumCorrect===0?'--':checkNum-checkNumCorrect+' 题'}}</td>
                    <td>{{isNum-isNumCorrect===0?'--':isNum-isNumCorrect+' 题'}}</td>
                    <td v-show="form.result !== '待阅卷'">{{fillNum-fillNumCorrect===0?'--':fillNum-fillNumCorrect+' 题'}}</td>
                    <td v-show="form.result !== '待阅卷'">{{qadNum-qadNumCorrect===0?'--':qadNum-qadNumCorrect+' 题'}}</td>
                </tr>
            </table>
            <div class="btn" :class="form.result === '已通过' ? '' : 'noBtn'"
          v-show="form.result !== '待阅卷'" >
                <el-button  @click="examine">查看答卷</el-button>
                
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { result } from "lodash";
import { ref ,reactive,toRefs} from "vue";
import { useRoute, useRouter } from "vue-router";
import {  getForResult} from "../../api/index";
import { ElTable, ElMessage } from "element-plus";
import moment from "moment";
const route = useRoute()

const router = useRouter()
const datas:any=reactive({
    testid:0,
    radioNum:0,//单选数量
    radioNumCorrect:0,
    checkNum:0,//多选
    checkNumCorrect:0,
    isNum:0,
    isNumCorrect:0,
    fillNum:0,
    fillNumCorrect:0,
    qadNum:0,
    qadNumCorrect:0,
    form:{
        title:'',
        begintime: "",
        endtime: "",
        questions:[]
    }
})
const{form,radioNum,checkNum,isNum,fillNum,qadNum,radioNumCorrect,checkNumCorrect,isNumCorrect,fillNumCorrect,qadNumCorrect}=toRefs(datas)
datas.testid =route.query.id
// console.log(datas.testid);

const getList=async ()=>{
    let res:any=await getForResult({testid:datas.testid})
    // console.log(res);
    if(res.errCode===10000){
        form.value=res.data
        res.data.questions.forEach((item:any,index:number)=>{
            if (item.type === "单选题") {
        datas.radioNum = datas.radioNum + 1;
        if (item.studentscores > 0) {
            datas.radioNumCorrect = datas.radioNumCorrect + 1;
        }
      }
      if (item.type === "多选题") {
        datas.checkNum = datas.checkNum + 1;
        if (item.studentscores > 0) {
            datas.checkNumCorrect = datas.checkNumCorrect + 1;
        }
      }
      if (item.type === "判断题") {
        datas.isNum = datas.isNum + 1;
        if (item.studentscores > 0) {
            datas.isNumCorrect = datas.isNumCorrect + 1;
        }
      }
      if (item.type === "问答题") {
        datas.qadNum = datas.qadNum + 1;
        if (item.studentscores > 0) {
            datas.qadNumCorrect = datas.qadNumCorrect + 1;
        }
      }
      if (item.type === "填空题") {
        datas.fillNum = datas.fillNum + 1;
        if (item.studentscores > 0) {
            datas.fillNumCorrect = datas.fillNumCorrect + 1;
        }
      }
        })    
    }
}
getList()
const goBack = () => {
    router.go(-1)
}

// 查看试卷
let examine = () => {
  router.push({path:'/examine',query:{id: datas.testid}})
}


</script>

<style scoped>
.examprepareBody {

    width: 100%;
    height: 100vh;
    background: url('http://edu.90000p.com/exam/cyx/assets/bg.bdbaa5ee.jfif') no-repeat;
    background-size: 100%;
    overflow: hidden;
    background-position: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.box {
    position: relative;
    width: 650px;
    background-color: #fff;
    padding: 50px 60px;

}

.stampBox {
    position: absolute;
    right: 70px;
    top: 50px;
    border: 2px solid #14bd83;
    border-radius: 50%;
    width: 96px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(323deg);
    color: #14bd83;

}
 .noBox{
    border: 4px solid rgba(255,0,0,.197);
    color: red;
}
.noBox .stamp{
    color: red;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: #14bd8229 solid 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    /* color: #14bd83; */
}
.stampBox>.stamp {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: #14bd8229 solid 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    color: #14bd83;

}

.time {
    padding: 0 20px;
    border-bottom: 1px #f1f1f1 solid;
    height: 35px;
    margin-top: 10px;
    display: flex;
    font-size: 10px;

}

.solid {
    width: 1px;
    height: 20px;
    background-color: #999b9d;
    margin: 2px 12px 0;

}

.examNum {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.passNum {
    font-size: 70px;
    color: #14bd83;
    margin: 10px 0;
}
.noPassNum{
    font-size: 70px;
    color: red;
    margin: 10px 0;
}
.numTitle {
    font-size: 23px;
}

.load {
    font-size: 70px;
    font-weight: 700;
    color: #f39134;
    margin-top: 20px;
    margin-bottom: 30px;
}

table {
    width: 100%;
    border-top: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
    border-collapse: collapse;
    margin-top: 30px;
}

td {
    border-bottom: 1px solid #f1f1f1;
    border-right: 1px solid #f1f1f1;
    text-align: center;
    font-size: 14px;
    padding: 20px;
}

.btn {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
.btn .el-button{
    width: 240px;
    height: 45px;
    font-size: 17px;
    background-color: #14bd83;

}
.noBtn{
    display: flex;
    justify-content: center;
    margin-top: 25px;
    /* background-color: red; */
    /* border: red 1px solid */
}
.noBtn .el-button{
    width: 240px;
    height: 45px;
    font-size: 17px;
    color: #fff;
    background-color: red;

}
</style>